// Modals
//
// Styleguide 10.

// Modal Parsing
//
// We parse the body for an h1 element and put it in the header, and if there's a `.js-modal-footer` element, we add it
// to the modal footer.
//
// Markup:
// <a href="./public/resources/pages/example-modal.json" class="js-modal">
//   I'll render the data from the example modal json file in a popup
// </a>
//
// Styleguide 10.1.

// Modal Form Parsing
//
// We check the body for a form and add the form buttons into the footer and the h1 into the header.
//
// Markup:
// <a href="./public/resources/pages/example-modal-form.json" class="js-modal">
//   I'll render the data from the example modal form json file in a popup
// </a>
//
// Styleguide 10.1.1.

// Modal Sizes and Placement
//
// You can choose different sizes and placements for you modals. The default leaves 3% of the viewport height at the
// top and bottom of the page. `.modal-center` leaves 25% at the top and bottom of the page. Smaller modals are good
// for confirm-type messages and can make short settings pages look less awkward.
//
// .modal-sm - Small modal.
// .modal-md - Medium modal.
// .modal-center - A modal more vertically centered.
//
// Markup:
// <a href="./public/resources/pages/example-modal.json" class="js-modal" data-css-class="{{modifier_class}}">
//   Click me!
// </a>
//
// Styleguide 10.2.

// Modal Types
//
// There are two modal types over the default modal:
//
// `noheader`: A modal without a header <br>
// `confirm`: A modal that navigates to the url if the user confirms and cancels the navigation if the user declines
//
// Styleguide 10.4.

// Modal Without a Header
//
// This modal won't parse the content for an h1 and add it to the top. The close icon will appear over the modal
// content.
//
// Markup:
// <a href="./public/resources/pages/example-modal.json" class="js-modal" data-modal-type="noheader">
//   Headless
// </a>
//
// Styleguide 10.4.1.

// Modal Confirm
//
// This modal navigates to the url if the user confirms and cancels the navigation if the user declines.
// If the confirm is to direct the user to a new page (rather than ajax-style processing content at an endpoint),
// add the attribute: `data-follow-link: true`. By default, the confirm modal has the `.modal-sm` class
// attached to it, but this can be overridden.
//
// Markup:
// <a href="#" class="js-modal" data-modal-type="confirm">
//   I'm a confirm modal
// </a>
// <br>
// <a href="#" class="js-modal-confirm">
//   I'm also a confirm modal
// </a>
//
// Styleguide 10.4.2.

// Overriding Content
//
// As we saw in section 10.2., you can override the css class of a modal by setting the data content attribute.
// You can also override the following settings: `title`, `body`, `footer` and `closeIcon`
//
// Styleguide 10.5.

// Overriding Regular Modal Text
//
// Markup:
// <a href="./public/resources/pages/example-modal.json" class="js-modal" data-title="A New Title">
//   I've overriden the modal title
// </a>
//
// Styleguide 10.5.1.

// Overriding Modal Confirm Text
//
// Like regular modals, the text for a confirm modal can be overridden.
//
// Markup:
// <a href="#" class="js-modal-confirm" data-title="HEY YOU!" data-body="Do you really wanna do this?">
//   I've overridden the confirm modal text
// </a>
//
// Styleguide 10.5.2.

// Modal Markup
//
// This is the basic markup for a modal and an idea of how they looks at their varous sizes.
// Note that the header and footer should also have the `js-modal-fixed` class applied to them to make them stick
// to the top and bottom of the modal on scroll.
//
// Note that the `ex-modal` class used below is actually `modal`, but `modal` add positioning which would make it
// difficult to preview here.
//
// .modal-sm - Small modal.
// .modal-md - Medium modal.
//
// Markup:
// <div class="ex-modal" tabindex="-1" role="dialog" aria-hidden="false" aria-labelledby="modalTitle">
//   <div class="modal-dialog {{modifier_class}}" role="document">
//     <div class="modal-content">
//       <div class="modal-header">
//         <h4 id="modalTitle" class="modal-title">Modal Title</h4>
//         <button type="button" class="btn-icon modal-close close" data-dismiss="modal" aria-label="Close">
//           <svg class="icon icon-svg icon-svg-close" viewBox="0 0 17 17">
//             <use xlink:href="#close" />
//           </svg>
//         </button>
//       </div>
//       <div class="modal-body">
//         <div class="padded">Modal Body</div>
//       </div>
//       <div class="modal-footer">
//         <button class="btn btn-secondary">Cancel</button>
//         <button class="btn btn-primary">OK</button>
//       </div>
//     </div>
//   </div>
// </div>
//
// Styleguide 10.6.

// Modal Markup - No Header
//
// Markup for a modal without a header. There is still a title for accessibility, but it is hidden.
//
// Markup:
// <div class="ex-modal" tabindex="-1" role="dialog" aria-hidden="false" aria-labelledby="modalTitle">
//   <div class="modal-dialog modal-no-header" role="document">
//     <h4 id="modalTitle" class="modal-title hidden">Modal Title</h4>
//     <div class="modal-content">
//       <div class="modal-body">
//         <!-- Media Item -->
//         <div class="media media-callout {{modifier_class}}">
//           <div class="media-left">
//             <div class="media-image-wrap">
//               <img src="./public/resources/images/dirty-rodent.jpg" alt="+Baseline">
//             </div>
//           </div>
//           <div class="media-body">
//             <div class="flag">Current Theme</div>
//             <div class="media-title">
//               <h3 class="media-heading theme-name">+Baseline</h3>
//               <div class="info">
//                 <span class="media-meta author">Created by <a href="#">Mark O'Sullivan</a></span>
//                 <span class="spacer">|</span><span class="media-meta version">Version 2.2.112.3</span>
//               </div>
//             </div>
//             <div class="media-description">
//               <div class="description">The default theme for Vanilla.</div>
//             </div>
//           </div>
//         </div>
//       </div>
//       <button type="button" class="btn-icon modal-close close" data-dismiss="modal" aria-label="Close">
//         <svg class="icon icon-svg icon-svg-close" viewBox="0 0 17 17">
//           <use xlink:href="#close" />
//         </svg>
//       </button>
//     </div>
//  </div>
//</div>
//
// Styleguide 10.6.1.

// When the modal fills the screen it has an even 3% on top and bottom
// Centers the modal
.modal-dialog {
    position: relative;
    margin: 3vh auto;
    // Below titlebar
    top: 56px;
    max-width: 1024px;

    &.modal-sm {
        max-width: 400px;
    }

    &.modal-md {
        max-width: 600px;
    }

    &.modal-center {
        // Appears more centered, vertically
        margin: 25vh auto;

        .modal-body {
            max-height: 50vh;
        }
    }
}

// Sets the maximum height of the entire modal to 94% of the screen height
.modal-body {
    $height: calc(92vh - #{$header-block-height + $footer-height});

    position: relative;
    max-height: $height;
    overflow-y: auto;
    padding: 0 $modal-inner-padding;

    .modal-confirm & {
        padding: $spacer;
    }

    .modal-full-height & {
        height: $height;
    }
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $zindex-modal-bg;
    background-color: $modal-backdrop-bg;

    // Fade for backdrop
    &.fade {
        opacity: 0;
    }
    &.in {
        opacity: $modal-backdrop-opacity;
    }
}

.modal-content {
    position: relative;
    background-color: $modal-content-bg;
    background-clip: padding-box;
    border: $border-width solid $modal-content-border-color;
    border-radius: $border-radius;
    @include box-shadow(0 3px 9px rgba(0, 0, 0, 0.5));
    outline: 0; // Remove focus outline from opened modal
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 0 $spacer * 0.5;
    z-index: $zindex-modal;
    overflow: hidden;
    outline: 0; // Prevent Chrome on Windows from adding a focus outline.
    -webkit-overflow-scrolling: touch;

    &.fade .modal-dialog {
        transition: opacity 0.2s ease-out;
        transform: none;
        opacity: 0;
    }

    &.in .modal-dialog {
        transform: none;
        -webkit-filter: none;
        opacity: 1;
    }
}

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-footer,
.modal-header {
    z-index: 1005;
    padding: ((60px - $control-height) * 0.5) $spacer;
}

.modal-footer {
    height: $footer-height;
    text-align: right; // right align buttons
    border-top: $border-width solid $modal-footer-border-color;
    margin-top: $border-width;

    &:empty {
        display: none;
    }

    // Fade appearance
    &::before {
        position: absolute;
        left: 0;
        bottom: 61px;
        display: block;
        width: 100%;
        height: 16px;
        box-shadow: inset 0 -12px 12px 0 rgba(255, 255, 255, 1);
        content: "";
    }
}

.modal-header {
    height: $header-block-height;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: $border-width solid $modal-header-border-color;
}

.modal-title {
    line-height: $line-height-sm;
    margin: 0;
}

.modal-close {
    padding: 0;

    svg {
        height: 52px - 18px;
    }
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.modal-no-header {
    .modal-close {
        position: absolute;
        top: $spacer * 0.5;
        right: $spacer * 0.5;
    }
}

// The modal js wraps the modal body and footer in a form element to place the form buttons in the footer.
// The side-effect of this is that some non-form elements can be wrapped in a form. This rather inelegant
// list-un-reset can be applied to any lists appearing in a modal that are not actually part of the form and should
// have list styling.
.modal .list-un-reset {
    ul,
    ol {
        margin-left: 15px;
    }

    ul li {
        list-style: disc inside;
    }

    ol li {
        list-style: decimal inside;
    }

    ul ul,
    ol ul {
        margin-left: 30px;

        li {
            list-style: circle inside;
        }
    }

    ol ol,
    ul ol {
        margin-left: 15px;

        li {
            list-style: lower-latin inside;
        }
    }
}
